﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../plugins/themes/common/validate/validate.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/common/form-style/form-style.css" rel="stylesheet"
        type="text/css" />
    <link href="../../plugins/themes/common/tooltip.css" rel="stylesheet" type="text/css" />
    

    <style type="text/css">
        .box-w-1
        {
            width: 200px;
        }
        
        table
        {
            font-size: 10pt;
        }
        
        body .f-f-label
        {
            width: 300px;
            text-align: right;
        }
    </style>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/validate/validate.js" type="text/javascript"></script>
    <script src="../../plugins/tooltip/tooltip.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var h = fly.ui.Validate.defaultHandlers.cssAndTooltip("f-v-error", true, true)
            var validater = new fly.ui.Validate({
                container: document.forms[0],
                events: { blur: h },
                handler: h
            });

            $("button").onClick(function () {
                var msgs = validater.validate()
                if (msgs) {
                    alert("输入有误")
                    validater.items.first("o=>!o.isValidate")[0].element.focus();
                }
                else {
                    alert("验证通过");
                }
                return false
            });

            $("table").attr("title", "双击查看 HTML")
            $("tr").onDblClick(function (o) {
                var input = $(o).find("input")[0];
                input && alert(input.outerHTML);
            });

        });

        function customValidateRole(v) {
            if(! /^\d*$/.test(v))
                return "只能输入数字"
        }
    </script>
</head>
<body>
    <form class="f-form">
    <table class="f-f-inner" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td class="f-f-label">
                    不能为空 2-10个字符,去除前后空格 (*|2-10|trim):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="*::不能为空|2-10|trim|tips:2到10个字符组成" /><a class="f-f-mast">*</a>
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    整数 (int):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="int|tips:只能为整数" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    正整数 (+int):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="+int" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    负整数 (-int):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="-int" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    整数、小数 ( float):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="float" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    正数 (+float):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="+float" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    负数 (-float):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="-float" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    邮箱 (mail):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="mail|tips:请填写有效的电子邮箱" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    手机 (trim|phone):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="trim|phone::手机号不正确|tips:请填写有效的手机号码" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    密码，必填 ( *):
                </td>
                <td>
                    <input name="Password" class="f-f-input box-w-1" rule="*|tips:请不要使用姓名、帐号、生日等作为密码" type="password" /><a
                        class="f-f-mast">*</a>
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    确认密码，和密码相同 (same:$Password):
                </td>
                <td>
                    <input name="RePassword" class="f-f-input box-w-1" rule="same:$Password|tips:请在输入一次上面填写的密码"
                        type="password" /><a class="f-f-mast">*</a>
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    小写字母 (a-z):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="a-z" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    大写字母 (A-Z):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="A-Z" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    字母 (a-Z):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="a-Z" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    大于5 (>5):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule=">5" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    大于等于5 (>=5):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule=">=5" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    小于20 (<20):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="<20" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    小于等于20 (<=20):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="<=20" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    5到20 (5->20):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="5->20" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    等于5 (==5):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="==5" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    不等于5 (!=5):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="!=5" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    b到e (b->e):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="b->e" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    只能是1,3,5,7,9之一 (1,3,5,7,9):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="1,3,5,7,9" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    只能是 星期六,星期,星期日 (星期六,星期,星期日):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="星期六,星期,星期日" />
                </td>
            </tr>
            <tr class="f-f-block-space">
                <td colspan="2">
                </td>
            </tr>
             <tr>
                <td class="f-f-label">
                    自定义正则表达式    (reg:/^[\da-z]*$/i):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="reg:/\d{15}||\d{18}/" rule0="reg:/^[\da-z]*$/i" />
                </td>
            </tr>
            <tr>
                <td class="f-f-label">
                    自定义函数,只能输入数字   (fun:customValidateRole):
                </td>
                <td>
                    <input class="f-f-input box-w-1" rule="fun:customValidateRole">
                </td>
            </tr>
        </tbody>
        <tr class="f-f-block-space">
            <td colspan="2" align="center">
                <button>
                    验证</button>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
